let _Vue = null;
export default class VueRouter{
    static install(Vue){
        if (VueRouter.install.installed) {     //判断插件是否已经安装
            return;
        }
        VueRouter.install.installed = true;

        _Vue = Vue;         //将Vue构造函数记录到VueRouter的全局

        _Vue.mixin({        //混入钩子函数beforeCreate钩子函数
            beforeCreate(){
                if (this.$options.router) {//第一次创建Vue实例的时候就传入了router对象。
                    _Vue.prototype.$router = this.$options.router;// 至此已经将VueRouter的实例放入到Vue的prototype里面了。后续所有的Vue实例都会有这个属性了。
                    this.$options.router.init()
                }
            }
        })
    }
    constructor(options){
        this.options = options; 
        this.routeMap = {};     //路由组件映射图
        this.data = _Vue.observable({
            current:'/'
        });
    }
    init(){
        this.createRouteMap();
        this.initComponents(_Vue);
        this.initEvent();
    }

    createRouteMap(){
        //遍历所有的路由规则，把路由规则解析成键值对的形式 存储到routeMap中
        this.options.routes.forEach(route => {
            this.routeMap[route.path] = route.component;
        })
    }
    //创建router-link的组件和
    initComponents(Vue){
        Vue.component('router-link',{
            props:{
                to:String
            },
            render(h){          //render函数是被创建元素调用的
                return h('a',{
                    attrs:{
                        href:this.$router.options.mode=='hash' ? `#${this.to}` : this.to,
                    },
                    on:{
                        click:this.clickHandler
                    }
                },this.$slots.default);//获取默认插槽当子元素。
            },
            methods:{
                clickHandler(e){
                    if (this.$router.options.mode == 'hash') {
                        // location.hash = `#${this.to}`;
                        this.$router.data.current = this.to;
                        // e.preventDefault();                        
                    }else{
                        history.pushState({},'',this.to);
                        this.$router.data.current = this.to;
                        e.preventDefault();
                    }
                }
            }
        })
        

        Vue.component('router-view',{   //这个响应式变化有点坑。
            render:(h)=>{
                console.log('this.data.current == ',this.data.current);
                return h(this.routeMap[this.data.current]); //这个h函数是如何变为相应式的。watch函数又是如何工作的。
            }
        })
    }

    initEvent(){
        if ('history' == this.options.mode) {
            let PopStateEventHandler = ()=>{
                this.data.current = window.location.pathname;
            }
            window.addEventListener('popstate',PopStateEventHandler);     
        } else {
            location.hash = '#/'
            let hashChangeEventHandler = ()=>{
                this.data.current = location.hash.substr(1);
           }
           window.addEventListener('hashchange',hashChangeEventHandler);            
        }
        
    }
}